<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
    <style type="text/css">
        .navbar-nav li.divider:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 14px;
            background-color: #a4a4a4;
            top: 18px;
            right: 0;
        }

        .carousel-indicators li {
            background-color: rgba(167, 167, 167, 0.5);
        }
    </style>
</head>
<body>
<div id="root">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">在线珠宝商城</a>
            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
											<g>
												<path d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
													c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
													C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
													H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
													c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
											</g>
										</svg>
                        <span class="text-muted">购物车</span>
                    </a>
                </li>
                <li class="divider"></li>
                <li><a href="../back/user/update.html">用户中心</a></li>
                <li class="divider"></li>
                <li><a href="./order/show.html">我的订单</a></li>
                <li class="divider"></li>
                <li><a href="wdShoucang.html">我的收藏</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
            </div>
            <div class="col-md-6">
                <form action="search-jewelry.html">
                    <div class="input-group navbar-btn">
                        <input type="text" name="productName" placeholder="搜索珠宝名" id="" class="form-control">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-danger"><span
                                    class="glyphicon glyphicon-search"></span></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <br>
        <br>
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h5 class="panel-title">分类浏览</h5>
                    </div>
                    <div class="panel-body">
                        <!-- 分类 -->
                        <div class="panel-group" id="category">
                            <div v-for="category in categories" :key="category.categoryId">
                                <a :href="'#' + category.categoryId" data-toggle="collapse"
                                   data-parent="#category"><strong
                                        class="text-danger">{{category.categoryName}}</strong></a>
                                <div class="panel">
                                    <div class="panel-collapse collapse" :id="category.categoryId">
                                        <div class="panel-body bg-success">
                                            <h5><a href="category-jewelry.html"
                                                   @click.prevent="categoryJewelry(category.categoryId)">{{category.categoryName}}</a>
                                            </h5>
                                            <a v-for="childCategory in category.childrenCategory"
                                               :key="childCategory.categoryId"
                                               href=""
                                               @click.prevent="categoryJewelry(category.categoryId, childCategory.categoryId)">
                                                <span class="text-info">{{childCategory.categoryName}} </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="top" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#top" data-slide-to="0"></li>
                        <li data-target="#top" data-slide-to="1"></li>
                        <li data-target="#top" data-slide-to="2"></li>
                        <li data-target="#top" data-slide-to="3"></li>
                    </ol>

                    <div class="carousel-inner" role="list-box">
                        <div class="item active">
                            <a href="jewelry-detail.html?productId=1">
                                <img src="/images/20240328210640.png">
                                <div class="carousel-caption"></div>
                            </a>
                        </div>
                        <div class="item">
                            <a href="jewelry-detail.html?productId=2">
                                <img src="/images/20240328210646.png">
                                <div class="carousel-caption"></div>
                            </a>
                        </div>
                        <div class="item">
                            <a href="jewelry-detail.html?productId=3">
                                <img src="/images/20240328210652.png">
                                <div class="carousel-caption"></div>
                            </a>
                        </div>
                        <div class="item">
                            <a href="jewelry-detail.html?productId=4">
                                <img src="/images/20240328210700.png">
                                <div class="carousel-caption"></div>
                            </a>
                        </div>
                    </div>

                    <a href="#top" class="left carousel-control" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a href="#top" class="right carousel-control" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            <div class="col-md-3">
                <h4>信息公告</h4>
                <ul>
                    <li>欢迎光临我们的珠宝商场，尽享精美珠宝和专业服务！</li>
                    <li>探索珠宝之美，尽在我们的商场！</li>
                    <li>特惠活动来袭，珠宝狂欢不容错过！</li>
                    <li>珠宝商场，打造您的璀璨人生！</li>
                    <li>珠宝之梦，从这里开始实现！</li>
                    <li>珠宝，诠释您独特的品味与风采！</li>
                    <li>珠宝，奢华生活的必备之选！</li>
                    <li>感受珠宝之美，畅享购物乐趣！</li>
                    <li>珠宝商场，满足您的每一份珠宝梦想！</li>
                </ul>
            </div>
        </div>

        <br>
        <br>
        <div class="row">
            <div class="col-sm-12">

                <ul class="nav nav-tabs" style="display:inline-block">
                    <li class="active"><a href="#recommend" data-toggle="tab"><strong>本站推荐</strong></a></li>
                    <li><a href="#hot-sale" data-toggle="tab"><strong>热销珠宝</strong></a></li>
                    <li><a href="#new-stores" data-toggle="tab"><strong>马上售罄</strong></a></li>
                    <li><a href="#new-hot-sale" data-toggle="tab"><strong>超低折扣</strong></a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="tab-content">
                <div class="tab-pane active" id="recommend">
                    <!--推荐-->
                    <div class="col-md-3" v-for="product in productList1">
                        <div class="thumbnail">
                            <a :href="'jewelry-detail.html?productId='+product.productId"><img
                                    :src="'http://localhost:8080/images/'+product.imageUrl" alt="图片"></a>
                            <div class="caption">
                                <a :href="'jewelry-detail.html?productId='+product.productId">
                                    <strong>{{product.productName}}</strong>
                                </a>
                                <p><span style="color:red">{{product.jprice}}</span><span>&nbsp;</span>
                                    <del class="text-muted small">{{product.price}}</del>
                                </p>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="tab-pane" id="hot-sale">
                    <!-- 热销 -->
                    <div class="col-md-3" v-for="product in productList2">
                        <div class="thumbnail">
                            <a :href="'jewelry-detail.html?productId='+product.productId"><img
                                    :src="'http://localhost:8080/images/'+product.imageUrl" alt="图片"></a>
                            <div class="caption">
                                <a :href="'jewelry-detail.html?productId='+product.productId">
                                    <strong>{{product.productName}}</strong>
                                </a>
                                <p><span style="color:red">{{product.jprice}}</span><span>&nbsp;</span>
                                    <del class="text-muted small">{{product.price}}</del>
                                </p>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="tab-pane" id="new-stores">
                    <!-- 新书上架 -->
                    <div class="col-md-3" v-for="product in productList3">
                        <div class="thumbnail">
                            <a :href="'jewelry-detail.html?productId='+product.productId"><img
                                    :src="'http://localhost:8080/images/'+product.imageUrl" alt="图片"></a>
                            <div class="caption">
                                <a :href="'jewelry-detail.html?productId='+product.productId">
                                    <strong>{{product.productName}}</strong>
                                </a>
                                <p><span style="color:red">{{product.jprice}}</span><span>&nbsp;</span>
                                    <del class="text-muted small">{{product.price}}</del>
                                </p>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="tab-pane" id="new-hot-sale">
                    <!-- 新书热卖 -->
                    <div class="col-md-3" v-for="product in productList4">
                        <div class="thumbnail">
                            <a :href="'file:///D:/images/'+product.imageUrl"><img
                                    :src="'http://localhost:8080/images/'+product.imageUrl" alt="图片"></a>
                            <div class="caption">
                                <a :href="'jewelry-detail.html?productId='+product.productId">
                                    <strong>{{product.productName}}</strong>
                                </a>
                                <p><span style="color:red">{{product.jprice}}</span><span>&nbsp;</span>
                                    <del class="text-muted small">{{product.price}}</del>
                                </p>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //自定义切换时间 默认为5s
    $('.carousel').carousel({
        interval: 4000
    });
</script>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            user: null,
            categories: {},
            productList1: [],
            productList2: [],
            productList3: [],
            productList4: []
        },
        created() {
            this.isLogin();
            this.getCategories();

            axios.get("/pro/bianji")
                .then(resp => {
                    console.log(resp.data);
                    this.productList1 = resp.data;
                });
            axios.get("/pro/rexiao")
                .then(resp => {
                    console.log(resp.data);
                    this.productList2 = resp.data;
                });
            axios.get("/pro/jiangkong")
                .then(resp => {
                    console.log(resp.data);
                    this.productList3 = resp.data;
                });
            axios.get("/pro/dijia")
                .then(resp => {
                    console.log(resp.data);
                    this.productList4 = resp.data;
                });
        },
        methods: {
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            isLogin() {
                axios.get('/user').then(res => {
                    this.user = res.data.data
                })
            },
            getCategories() {
                axios.get('/category').then(res => {
                    if (res.status === 200) {
                        this.categories = res.data.data;
                    } else {
                        console.error(res.data);
                    }
                });
            },
            categoryJewelry(pId = 0, cId = 0) {
                let url = `category-jewelry.html?pId=${pId}&cId=${cId}`;
                if (cId === 0) {
                    url = `category-jewelry.html?pId=${pId}`
                }
                location.href = url;
            }
        }
    });
</script>
</html>